<template>
	<view class="number-box">
		<view class="cut" @click="money('cutMoney')">-</view>
		<view class="box-content">
			<input type="number" v-model="inputValue" @focus="inputValue=''" @blur="inputTab" @input="onInput" :class="{'add-color':inputValue > value}">
			<view>{{ company == 0 ? '元/小时' : company == 1 ? '元/件' : company == 2 ? '元/天' : '' }}</view>
		</view>
		<view class="add" @click="money('addMoney')">+</view>
	</view>
</template>

<script>
	export default {
		props: {
			//输入框初始值
			value: {
				type:Number,
				default: ''
			},
			//单位
			company: {
				type:String,
				default: ''
			}
		},
		data(){
			return {
				inputValue:this.value
			}
		},
		methods: {
			onInput(e){
				console.log(e.detail)
				this.inputValue = e.detail.value;
				this.$emit('money',this.inputValue);
			},
			money(data){
				if (this.inputValue < 0.01 ) {
					uni.showToast({
							icon: 'none',
							title: '不能低于0.01元噢~'
					});
					return
				}
				if (data == 'cutMoney') {
					if (this.inputValue <= this.value) return uni.showToast({
							icon: 'none',
							title: '不能低于或等于初始金额~'
					});
					this.company == 1 || this.company == 2 ? this.inputValue = parseFloat((this.inputValue -= 0.01).toFixed(2)) : this.inputValue--;
					this.$emit('money',this.inputValue);
				} else {
					// this.company == 1 || this.company == 2 ? this.inputValue += 0.01  : this.inputValue++;
					this.company == 1 || this.company == 2 ? this.inputValue = parseFloat((this.inputValue += 0.01).toFixed(2)) : this.inputValue++;
					this.$emit('money',this.inputValue);
				}
			},
			inputTab(e){
				if (e.detail.value < this.value) {
					uni.showToast({
							icon: 'none',
							title: '不能低于或等于初始金额~'
					});
					this.inputValue = this.value;
					this.$emit('money',this.inputValue);
				} 
			}
		},
	}
</script>

<style lang="less">
	.number-box {
		display: flex;
		.cut {
			width: 116rpx;
			height: 72rpx;
			background: #F0F0F0;
			border-radius: 36rpx 0 0 36rpx;
			color: #402110;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		.box-content {
			width: 232rpx;
			height: 72rpx;
			background: #FAFAFA;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			& > view{
				font-size: 20rpx;
				color: #402110;
			}
			& > input{
				width: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #C8C8C8;
				font-weight: bold;
			}
		}
		.add {
			width: 116rpx;
			height: 72rpx;
			background: #F0F0F0;
			border-radius: 0 36rpx 36rpx 0;
			color: #402110;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
		}
		.add-color {
			color: #FF4642 !important;
		}
	}
</style>
